<template><!--西药申请页面-->
	<div class="drugApplyW">
		<el-form label-width="120px" :model="applytable" :rules="rules" ref="applyform" class="apply-form">
			<h4 class="applytable">药物补给申请表</h4>
			<el-button class="updDrug" @click="toggleEditing">{{ isEditing ? '补充药物' : '添加药物' }}</el-button>
			<p class="radio-p">
				<el-radio label="中药" disabled>中药</el-radio>
				<el-radio label="西药" v-model="applytable.type">西药</el-radio>
			</p>
			<el-form-item label="药品名称" prop="drugname">
				<el-input v-model="applytable.drugname"></el-input>
			</el-form-item>
			<el-form-item label="OTC标志" prop="otc" v-if="isEditing">
				<el-select v-model="applytable.otc" placeholder="请选择">
					<el-option v-for="item in OTC" :key="item.otc_value" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="剂型" prop="form" v-if="isEditing">
				<el-select v-model="applytable.form" placeholder="请选择">
					<el-option v-for="f in form" :key="f.form_value" :label="f.label" :value="f.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="药品规格" prop="specification" v-if="isEditing">
				<el-input v-model="applytable.specification"></el-input>
			</el-form-item>
			<el-form-item label="数量（件）" prop="quantity">
				<el-input v-model="applytable.quantity"></el-input>
			</el-form-item>
			<el-form-item label="申请人" prop="applicant" v-if="isEditing">
				<el-input v-model="applytable.applicant"></el-input>
			</el-form-item>
			<el-form-item label="单价" prop="price" v-if="isEditing">
				<el-input v-model="applytable.price"></el-input>
			</el-form-item>
			<el-form-item label="申请科室" prop="department" v-if="isEditing">
				<el-input v-model="applytable.department"></el-input>
			</el-form-item>
			<el-form-item label="申请时间" prop="applyTime">
				<el-date-picker v-model="applytable.applyTime" type="date" placeholder="选择日期"></el-date-picker>
			</el-form-item>
			<p class="submit">
				<el-button type="reset" @click="resetApply">重置申请</el-button>
				<el-button type="submit" @click="submitApply">提交申请</el-button>
			</p>
		</el-form>
		<h4 class="tips">以下药品库存不足10件了，建议申请补给！</h4>
		<el-table :data="insufficientTable" border class="insufficientTable">
			<el-table-column prop="drugname" label="药品名称"></el-table-column>
			<el-table-column prop="type" label="类别"></el-table-column>
			<el-table-column prop="quantity" label="库存"></el-table-column>
		</el-table>
	</div>
</template>

<script type="text/ecmascript-6">
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			let validatevalue = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('此处值不能为空！'));
				} else {
					callback();
				}
			};
			let checkquantity = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('此处值不能为空！'));
				}
				setTimeout(() => {
					if (/^\d+$/.test(value) === false) {
						callback(new Error('请输入数字值！'));
					} else {
						callback();
					}
				}, 1000);
			};
			return {
				OTC: [{
						otc_value: '选项1',
						label: '处方药'
					},
					{
						otc_value: '选项2',
						label: '非处方药'
					}
				],
				// 规格
				form: [{
						form_value: '选项1',
						label: '片剂'
					},
					{
						form_value: '选项2',
						label: '胶囊剂'
					},
					{
						form_value: '选项3',
						label: '丸剂'
					},
					{
						form_value: '选项4',
						label: '散剂'
					},
					{
						form_value: '选项5',
						label: '颗粒剂'
					},
					{
						form_value: '选项6',
						label: '外用膏剂'
					},
					{
						form_value: '选项7',
						label: '液体剂'
					},
					{
						form_value: '选项8',
						label: '气体剂'
					},
					{
						form_value: '选项9',
						label: '注射液剂'
					}
				],
				// 保存申请药物补给表的数据
				applytable: {
					drugname: "", // 药品名称
					otc: "", // OTC标志
					form: "", // 剂型
					specification: "", // 药品规格
					quantity: "", // 数量
					applicant: "", // 申请人
					price: "", //单价
					department: "", // 申请科室
					applyTime: "", // 申请时间
					type: "西药", // 中药/西药选择
				},
				rules: {
					drugname: [{
						validator: validatevalue,
						trigger: 'blur'
					}],
					drugform: [{
						validator: validatevalue,
						trigger: 'blur'
					}],
					drugquantity: [{
						validator: checkquantity,
						trigger: 'blur'
					}],
					applyoffices: [{
						validator: validatevalue,
						trigger: 'blur'
					}],
					applyman: [{
						validator: validatevalue,
						trigger: 'blur'
					}],
					otc_value: [{
						validator: validatevalue,
						trigger: 'change'
					}],
					form_value: [{
						validator: validatevalue,
						trigger: 'change'
					}],
					date: [{
						validator: validatevalue,
						trigger: 'blur'
					}]
				},
				// 药物库存不足表格
				insufficientTable: [],
				isEditing: true
			};
		},
		mounted() {
			this.getinsufficientData();
		},
		methods: {
			toggleEditing() {
				this.isEditing = !this.isEditing; // 切换状态
			},

			// 点击提交申请按钮执行
			submitApply: function() {
				// 如果 isEditing 为 false，直接跳过重复检查
				if (!this.isEditing) {
					this.$http
						.post("http://localhost:8088/updateDrugsW", this.applytable)
						.then((valid) => {
							if (valid) {
								this.$notify({
									message: "提交成功",
									type: "success",
								});
							} else {
								this.$notify.error({
									message: "提交失败",
								});
								return false;
							}
						});
					return;
				}

				// 如果 isEditing 为 true，检查 drugname 是否重复
				const isDuplicate = this.insufficientTable.some(item => item.drugname === this.applytable.drugname);
				if (isDuplicate) {
					this.$notify.error({
						message: "药品名称已存在，请输入不同的药品名称！",
					});
					return; // 阻止提交
				}
				// 获取 OTC 标志的 label
				const selectedOTC = this.OTC.find(
					(item) => item.otc_value === this.applytable.otc_value
				);
				const selectedForm = this.form.find(
					(f) => f.form_value === this.applytable.form_value
				);

				// 如果找到了对应的 label，则更新数据
				if (selectedOTC) {
					this.applytable.otc_value = selectedOTC.label;
				}

				if (selectedForm) {
					this.applytable.form_value = selectedForm.label;
				}

				this.$http
					.post("http://localhost:8088/insertDrugsW", this.applytable)
					.then((valid) => {
						if (valid) {
							this.$notify({
								message: "提交成功",
								type: "success",
							});
						} else {
							this.$notify.error({
								message: "提交失败",
							});
							return false;
						}

					});
			},
			// 点击重置申请按钮执行
			resetApply: function() {
				// 重置当前vue实例的所有数据
				this.$refs.applyform.resetFields();
			},
			// 获取库存不足10件的数据
			getinsufficientData: function() {
				this.$http.get("http://localhost:8088/getDrugsByQuantityW").then((response) => {
					console.log(response);
					this.insufficientTable = response.body.data.list;
				}).catch((error) => {
					console.error("请求失败：", error);
					if (error.response) {
						this.$notify.error({
							message: `数据请求失败，状态码: ${error.response.status} - ${error.response.statusText}`,
						});
					} else {
						this.$notify.error({
							message: "数据请求失败，请检查网络或联系管理员",
						});
					}
				});
			},
		},
	};
</script>

<style>
	.updDrug {
		position: absolute;
		left: 550px;
		top: 120px;
	}
	.drugApplyW .apply-form {
		width: 100%;
	}

	.drugApplyW .apply-form .applytable {
		display: block;
		line-height: 30px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		margin: 0 auto;
	}

	.drugApplyW .apply-form .radio-p {
		line-height: 80px;
		text-align: center;
	}

	.drugApplyW .apply-form .el-form-item {
		display: inline-block;
		width: 25%;
		padding-left: 40px;
		padding-right: 40px;
	}

	.drugApplyW .apply-form .el-select {
		width: 100%;
	}

	.drugApplyW .apply-form .submit {
		margin-top: 20px;
		text-align: center;
	}

	.drugApplyW .tips {
		display: block;
		padding-left: 95px;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #FF4949;
	}

	.drugApplyW .insufficientTable {
		width: 85%;
		margin: 0 auto;
	}
</style>